import React from 'react';
import { Form, InputNumber, Radio } from 'antd';
import CustomButton from './CustomButton';
import styles from './MedicalInfo.less';

const MedicalInfo: React.FC = () => {
  return (
    <div className={styles.medicalInfoForm}>
      <Form layout="vertical">
        {/* 1. 血压 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>1</span>血压 (mmHg)<span className={styles.required}>*</span></span>} 
            name="bloodPressure" 
            rules={[{ required: true, message: '请填写血压' }]}
          >
            <div className={styles.subFields}>
              <div className={styles.subField}>
                <label className={styles.subLabel}>舒张压</label>
                <InputNumber placeholder="请输入舒张压" min={50} max={200} />
              </div>
              <div className={styles.subField}>
                <label className={styles.subLabel}>收缩压</label>
                <InputNumber placeholder="请输入收缩压" min={80} max={300} />
              </div>
            </div>
          </Form.Item>
        </div>

        {/* 2. 血糖 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>2</span>血糖 (随机) (mmol/L)<span className={styles.required}>*</span></span>} 
            name="bloodGlucose" 
            rules={[{ required: true, message: '请输入血糖值' }]}
          >
            <InputNumber placeholder="请输入血糖值" min={0} max={50} step={0.1} />
          </Form.Item>
        </div>

        {/* 3. 糖化血红蛋白 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>3</span>糖化血红蛋白 (%)<span className={styles.required}>*</span></span>} 
            name="hba1c" 
            rules={[{ required: true, message: '请输入糖化血红蛋白值' }]}
          >
            <InputNumber placeholder="请输入糖化血红蛋白值" min={0} max={20} step={0.1} />
          </Form.Item>
        </div>

        {/* 4. 总胆固醇 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>4</span>总胆固醇 (mmol/L)<span className={styles.required}>*</span></span>} 
            name="totalCholesterol" 
            rules={[{ required: true, message: '请输入总胆固醇值' }]}
          >
            <InputNumber placeholder="请输入总胆固醇值" min={0} max={20} step={0.1} />
          </Form.Item>
        </div>

        {/* 5. 高密度脂蛋白胆固醇 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>5</span>高密度脂蛋白胆固醇 (mmol/L)<span className={styles.required}>*</span></span>} 
            name="hdlCholesterol" 
            rules={[{ required: true, message: '请输入高密度脂蛋白胆固醇值' }]}
          >
            <InputNumber placeholder="请输入高密度脂蛋白胆固醇值" min={0} max={10} step={0.1} />
          </Form.Item>
        </div>

        {/* 6. 尿酸 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>6</span>尿酸 (µmol/L)<span className={styles.required}>*</span></span>} 
            name="uricAcid" 
            rules={[{ required: true, message: '请输入尿酸值' }]}
          >
            <InputNumber placeholder="请输入尿酸值" min={0} max={1000} />
          </Form.Item>
        </div>

        {/* 7. 疾病亚型 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>7</span>疾病亚型<span className={styles.required}>*</span></span>} 
            name="diseaseSubtype" 
            rules={[{ required: true, message: '请选择疾病亚型' }]}
          >
            <Radio.Group>
              <Radio value="cd">CD</Radio>
              <Radio value="uc">UC</Radio>
              <Radio value="uncertain">不确定</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 8. 是否首次确诊为IBD */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>8</span>是否首次确诊为IBD (确诊时间6个月以内)<span className={styles.required}>*</span></span>} 
            name="firstDiagnosis" 
            rules={[{ required: true, message: '请选择是否首次确诊' }]}
          >
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 9. 是否初次治疗 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>9</span>是否初次治疗 (初次使用IBD相关药物)<span className={styles.required}>*</span></span>} 
            name="initialTreatment" 
            rules={[{ required: true, message: '请选择是否初次治疗' }]}
          >
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        {/* 10. UC蒙特利尔分型 */}
        <div className={styles.formSection}>
          <Form.Item 
            label={<span className={styles.sectionLabel}><span className={styles.numberBadge}>10</span>UC蒙特利尔分型 (位置)【确诊时】<span className={styles.required}>*</span></span>} 
            name="ucMontrealType" 
            rules={[{ required: true, message: '请选择UC蒙特利尔分型' }]}
          >
            <Radio.Group style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <Radio value="e1">E1 (直肠) 结肠镜下病变局限于直肠,未达乙状结肠</Radio>
              <Radio value="e2">E2 (左半结肠) 结肠镜下病变累及左半结肠(脾曲以远)</Radio>
              <Radio value="e3">E3 (广泛结肠) 结肠镜下广泛病变累及脾曲以近乃至全结肠</Radio>
            </Radio.Group>
          </Form.Item>
        </div>
      </Form>
      
      <div style={{ textAlign: 'left', marginTop: '24px' }}>
        <CustomButton 
          text="下一步" 
          onClick={() => console.log('下一步')} 
        />
      </div>
    </div>
  );
};

export default MedicalInfo;
